<script setup>
import { ref, onMounted } from 'vue'
import {Getdictionary,delDictionary,delDictionaryAll} from '@/api/dictionary.js'
import AddTable from './componets/add-table.vue'
import { ElMessage } from 'element-plus'
import { Search ,Refresh,Plus,Delete,Download,EditPen} from '@element-plus/icons-vue'
const showDialog=ref(false)
// 分页
const small = ref(false)
const disabled = ref(false)
const handleSizeChange =async (val) => {
  paramspage.value.page = val
  await GetdictionaryAPI()
}
const handleCurrentChange =async (value) => {
  paramspage.value.size = value
  paramspage.value
 await GetdictionaryAPI()
}
const Add = () => {
  showDialog.value=true
}
// 分页数据
const paramspage = ref({
  page: 1,
  size: 10,
  total: 0,
  name: '',
  dictionary: '',
  status: null,
  createTime:''
})
// table数据
const tableData = ref([])
const GetdictionaryAPI = async () => {
console.log(paramspage.value);
  const {data,total} = await Getdictionary(paramspage.value)
  tableData.value = data
 paramspage.value.total=total
}
// 
onMounted(() => {
  GetdictionaryAPI()
})
// 删除
const del =async (id) => {
  await delDictionary(id)
  GetdictionaryAPI()
}
// 编辑
const formEdit=ref(null)
const edit = (row) => {
  showDialog.value = true
  formEdit.value.getEditAPI(row)
}
// 搜索
const search = () => {
  GetdictionaryAPI()
}
// 重置
const form=ref()
const Rfresh =async () => {
  await form.value.resetFields()
  GetdictionaryAPI()
}
// 批量删除
const formid = ref({
  ids:[]
})
const delselect = (selection) => {
  formid.value.ids = selection.map(item=>item.id)
}
const delbox =async () => {
  await delDictionaryAll(formid.value)
  ElMessage({
        showClose: true,
        message: '删除成功',
        type: 'success'
  })   
  GetdictionaryAPI()   
}
// 表单时间


</script>
<template>
 <el-row type="flex" justify="space-between">
  <el-form :inline="true" :model="paramspage" class="demo-form-inline" ref="form">
    <el-form-item label="字典类型：" style="width: 155px;" prop="dictionary">
      <el-input v-model="paramspage.dictionary" placeholder="请输入类型" />
    </el-form-item>
    <el-form-item label="字典名称：" style="width: 155px;" prop="name">
      <el-input v-model="paramspage.name" placeholder="请输入岗位名称" />
    </el-form-item>
    <el-form-item label="状态：" style="width: 155px;">
      <el-select v-model="paramspage.status" placeholder="选择状态" >
        <el-option label="正常" value="paramspage.status" />
        <el-option label="禁用" value="paramspage.status" />
      </el-select>
    </el-form-item>
    <el-form-item label="创建时间" prop="createTime">
      <el-date-picker
    type="daterange"
    range-separator="-"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    style="width: 200px;"
    v-model="paramspage.createTime"
  />
        </el-form-item>
        <el-form-item style="margin-top:33px">
      <el-button type="primary" @click="search()" :icon="Search">搜索</el-button>
      <el-button  :icon="Refresh" @click="Rfresh()">重置</el-button>
    </el-form-item>
  </el-form>
 </el-row>
<el-row type="flex" justify="end" style="margin-botton:30px">
    <el-button @click="Add" type="primary" plain :icon="Plus" >新增</el-button>
    <el-button type="danger" plain :icon="Delete" @click="delbox">删除</el-button>
    <el-button type="warning" plain :icon="Download">导出</el-button>
    <el-button type="success" plain :icon="Refresh">清理缓存</el-button>
</el-row>
  <el-row style="margin-top:30px">
  <el-table
    :data="tableData"
    style="width: 100%"
    stripe 
    @select="delselect"
  >
    <el-table-column type="selection"  />
    <el-table-column type="index" label="字典编号" width="120px"/>
    <el-table-column prop="name" label=" 字典名称"  />
    <el-table-column prop="dictionary" label=" 字典类型"  />
    <el-table-column prop="status" label=" 状态">
      <template v-slot="{row}">
     {{ row.status===1?'正常':'禁用' }}
      </template>
    </el-table-column>
    <el-table-column prop="notes" label=" 备注"  />
    <el-table-column prop="createTime" label="创建时间" width="180px" />
    <el-table-column prop="option" label=" 操作" >
    <template v-slot="{row}">
      <el-button type="text" :icon="EditPen" @click="edit(row)">修改</el-button>
      <el-button type="text" style="color:red" :icon="Delete" @click="del(row.id)">删除</el-button>
    </template>
    </el-table-column>
  </el-table>
  </el-row>
  <el-row type="flex" justify="center" style="margin-top:30px">
  <el-pagination
      :page-sizes="[5, 10, 15, 20]"
      :small="small"
      :disabled="disabled"
      :current-page="paramspage.page"
      :background="false"
      layout="total, sizes, prev, pager, next, jumper"
      :total="paramspage.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
 </el-row>
  <add-table v-model:showDialog="showDialog" @addSucess="GetdictionaryAPI" ref="formEdit"></add-table>
</template>
<style scoped>
.el-form-item{
  display:inline-block;
}

</style>